<script setup lang="ts">
import CategoryPanel from '@/components/CategoryPanel/CategoryPanel.vue'
import CustomNavbar from '@/components/CustomNavbar/CustomNavbar.vue'
import HotPanel from '@/components/HotPanel/HotPanel.vue'
import XtxGuess from '@/components/XtxGuess/XtxGuess.vue'
import XtxSwiper from '@/components/XtxSwiper/XtxSwiper.vue'
import {
  getHomeBannerAPI,
  getHomeCategoryAPI,
  getHomeGuessAPI,
  getHomeHotAPI,
} from '@/services/home'
import type { BannerItem, CategoryItem, GuessItem, Result } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'

//获取轮播图信息
const bannerList = ref<BannerItem[]>([])

const getHomeBannerList = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

onLoad(() => {
  getHomeBannerList()
})

// 获取分类信息
const categoryList = ref<CategoryItem[]>([])
const getHomeCategoryList = async () => {
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}
onMounted(() => {
  getHomeCategoryList()
})

// 获取热门推荐信息
const hotList = ref<Result[]>([])
const getHomeHotList = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
  // console.log(res)
}
onLoad(() => {
  getHomeHotList()
})

// 获取猜你喜欢信息
const guessList = ref<GuessItem[]>([])
const getHomeGuessList = async () => {
  const res = await getHomeGuessAPI({ page: 1, pageSize: 4 })
  guessList.value = res.result.items
}
onLoad(() => {
  getHomeGuessList()
})
// 下拉刷新状态
const refresherTriggered = ref(false)
// 下拉刷新重新获取数据
const onRefresh = async () => {
  refresherTriggered.value = true

  await Promise.all([
    getHomeBannerList(),
    getHomeCategoryList(),
    getHomeHotList(),
    getHomeGuessList(),
  ])
  refresherTriggered.value = false
}
</script>

<template>
  <!-- 头部导航 -->
  <CustomNavbar />
  <!--    refressher-enabled 开启下拉刷新   -->
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresh"
    :refresher-triggered="refresherTriggered"
  >
    <!-- 轮播图 -->
    <XtxSwiper :list="bannerList" />
    <!-- 分类面板 -->
    <CategoryPanel :list="categoryList" />
    <!-- 热门商品 -->
    <HotPanel :list="hotList" />
    <!-- 猜你喜欢 -->
    <XtxGuess :list="guessList" ref="guessListRef" />
  </scroll-view>

  <view class="index">index</view>
</template>

<style lang="scss">
//
</style>
